<template>
  <el-container>
    <el-header>
      <h1>优惠券管理</h1>
    </el-header>
    <div style="display: flex ;margin-left: 500px">
      <el-button @click="addCoupon" style="width: 100px;margin-left: 350px" type="info">添加优惠券</el-button></div>
    <el-main>
      <el-table :data="coupon" style="width: 100%" >
        <el-table-column prop="name" label="优惠券名称" width="200"></el-table-column>
        <el-table-column prop="number" label="优惠券数量" width="200"></el-table-column>
        <el-table-column prop="amount" label="优惠券金额" width="200"></el-table-column>
        <el-table-column prop="validDate" label="优惠券有效期" width="200"></el-table-column>
        <el-table-column prop="startAmount" label="优惠券起步金额" width="200"></el-table-column>
        <el-table-column label="操作" width="200" >
          <template #default="{ row }">
            <el-button  type="primary" size="small" @click="editCoupon(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteCoupon(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="优惠券操作" direction="rtl" size="50%">
      <!-- 添加优惠券表单 -->
      <el-form :model="couponModel" label-width="100px">
        <el-input v-model="couponModel.name" style="width: 240px" placeholder="请输入优惠券名" />
        <el-form-item label="优惠券金额">
          <div class="editor">
            <el-slider style="width: 600px" v-model="couponModel.amount" :step="5" :format-tooltip="formatTooltip"/>
          </div>
        </el-form-item>
        <el-form-item label="数量">
          <div class="editor">
            <el-slider style="width: 600px" v-model="couponModel.number" :step="10" :format-tooltip="formatTooltip"/>
          </div>
        </el-form-item>
        <el-form-item label="有效天数">
          <div class="editor">
            <el-slider style="width: 600px" v-model="couponModel.validDate" :step="7" />
          </div>
        </el-form-item>
        <el-form-item label="使用起步金额">
          <div class="editor">
            <el-slider style="width: 600px" v-model="couponModel.startAmount" :step="10" :format-tooltip="formatTooltip"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tokeCoupon">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-container>
</template>

<script setup>

import {ref} from "vue";
import {useTokenSotre} from "@/stores/token";
import {ElMessage, ElMessageBox} from "element-plus";
const tokenStore = useTokenSotre()
const value1 = ref(0)
const coupon = ref([
  {
    id:'',
    name:'s',
    amount:0,
    number: 0,
    validDate: 0,
    startAmount:0
  },
],)
const editCoupon= (row)=>{
  drawer.value=1
  visibleDrawer.value=true
  couponModel.value.name=coupon.value[0].name
  couponModel.value.number=coupon.value[0].number
  couponModel.value.amount=coupon.value[0].amount
  couponModel.value.validDate=coupon.value[0].validDate
  couponModel.value.startAmount=coupon.value[0].startAmount
  fix.value=0
}
const formatTooltip = (val) => {
  return val * 10
}
const input=ref('')
//添加品牌
const addCoupon = ()=>{
  drawer.value=0
  visibleDrawer.value=true
  clearInfo()
}
const clearInfo=()=>{
  couponModel.value.name=''
  couponModel.value.amount=''
  couponModel.value.validDate= ''
  couponModel.value.startAmount= ''
  couponModel.value.number= ''
}
const drawer = ref(0)
//删除分类
const deleteCoupon=(row)=>{
  ElMessageBox.confirm(
      '请问您确定要删除吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await delCouponService(row.id)
        clearInfo()
        setTimeout(() => {
          // 方法区
          setInfo()
        }, 1000);
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//控制抽屉是否显示
const visibleDrawer = ref(false)
const exceeds=()=>{
  ElMessage.error("图片过大")
}

const couponModel = ref({
  id:'',
  name:'s',
  amount:0,
  number: 0,
  validDate: 0,
  startAmount:0
})

const increase = ()=>{
  couponModel.value.amount*10
  couponModel.value.number*10
  couponModel.value.startAmount*10
}
import {couponInsertService, delCouponService, getService, upCouponInfoService} from '@/api/coupon'
const fix = ref(1)
const tokeCoupon = async ()=>{
  if (fix.value===1){
    increase()
    console.log(coupon.value[0])
    if (coupon.value[0]!==null){
      coupon.value[0].number=0
      upCouponInfoService(coupon.value[0])
    }
    couponInsertService(couponModel.value)
    ElMessage.success("添加成功")
  }else {
    updateInfo()
  }
  visibleDrawer.value=false
  clearInfo()
  setTimeout(() => {
    // 方法区
    setInfo()
  }, 1000);

}

const setInfo=async ()=>{
  let result =await getService()
  // coupon.value = result.data
  console.log(result.data)
  coupon.value[0]=result.data
}
setInfo()
const updateInfo=async ()=>{
  increase()
  await upCouponInfoService(couponModel.value)
  ElMessage.success("修改成功")
}


</script>